<!DOCTYPE html>
<html  lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	   xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">


<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

	<title>个人资料</title>

<!--	<link href="/static/yonghu/AmazeUI-2.4.2.assets.css/admin.css" rel="stylesheet" type="text/css" >-->
	<link href="https://cdn.bootcss.com/amazeui/2.5.1/css/amazeui.css" rel="stylesheet" type="text/css"/>

	<link href="/static/yonghu/css/personal.css" rel="stylesheet" type="text/css">
	<link href="/static/yonghu/css/infstyle.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" th:src="@{/static/lib/jquery/1.9.1/jquery.min.js}"></script>
<!--	<script src="/static/yonghu/AmazeUI-2.4.2/assets/js/amazeui.js" type="text/javascript"></script>-->
	<script type="text/javascript" th:src="@{/static/lib/layer/2.4/layer.js}"></script>

</head>

<body>
<!--头 -->
<header>

</header>
<div class="nav-table">
	<div class="long-title"><span class="all-goods">个人中心</span></div>
</div>
<b class="line"></b>
<div class="center">
	<div class="col-main">
		<div class="main-wrap">
			<div class="user-info">
				<!--标题 -->
				<div class="am-cf am-padding">
					<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">个人资料</strong> / <small>Personal&nbsp;information</small></div>
				</div>
				<hr/>

				<!--头像 -->
				<div class="user-infoPic">

					<div class="filePic">
<!--						<input type="file" class="inputPic" allowexts="gif,jpeg,jpg,png,bmp" accept="image/*">-->
<!--						<img class="am-circle am-img-thumbnail" src="/static/yonghu/images/getAvatar.do.jpg" alt="" />-->
						<form id="editPic" method="post" enctype="multipart/form-data">
							<input type="file" class="inputPic" id="upLoad" allowexts="gif,jpeg,jpg,png,bmp"
								   onchange="submitPic(this)" onclick="submitPic(this)">
							<span th:if="${list.userPhoto} eq null and ${list.userPhoto} eq ''">
                                    <img class="am-circle am-img-thumbnail" src="/static/yonghu/images/getAvatar.do.jpg"
										 alt=""/>
                            </span>
							<img class="am-circle am-img-thumbnail" th:src="@{'../static/yonghu/images/getAvatar.do.jpg'+${list.userPhoto}}"
								 alt=""/>
						</form>
					</div>

					<p class="am-form-help">头像</p>

					<div class="info-m" th:each="list:${list}">
						<div><b>姓名：<i th:text="${list.userName}">小叮当</i></b></div>
						<div th:switch="${list.userGender}">
							性别：
							<span th:case="1">男</span>
							<span th:case="0">女</span>
						</div>
						<div><b>手机号码：<i th:text="${list.userPhone}"></i></b>&nbsp;&nbsp;<a href=""
																						   style="color: #0a6999"
																						   onclick="">修改</a>
						</div>
<!--                        <div><b>邮箱：<i th:text="${list.userEmail}"></i> </b> </div>-->
						<div><a href="" style="color: #0a6999" onclick="">修改密码</a></div>
					</div>
				</div>


				<form class="am-form am-form-horizontal" id="editForm">
					<!--个人信息 -->
					<div class="info-main">
						<div class="am-form-group">
							<label for="user-name2" class="am-form-label">昵称</label>
							<div class="am-form-content">
								<input id="user-name2" name="userName" placeholder="nickname" th:value="${list.userName}">
							</div>
						</div>

						<div class="am-form-group">
							<label  class="am-form-label">性别</label>
							<div class="am-form-content sex" for="userGender" th:switch="${list.userGender}">
								<label class="am-radio-inline">
									<input type="radio" name="userGender"  value="1" data-am-ucheck checked> 男
								</label>
								<label class="am-radio-inline">
									<input type="radio" name="userGender"  value="0" data-am-ucheck> 女
								</label>

							</div>
						</div>

						<div class="am-form-group">
							<label for="userEmail" class="am-form-label">电子邮件</label>
							<div class="am-form-content">
								<input id="userEmail" name="userEmail" placeholder="userEmail" type="email" th:value="${list.userEmail}">
							</div>
						</div>
						<div class="info-btn">
							<div class="am-btn am-btn-danger" onclick="editMessage()">保存修改</div>

						</div>
					</div>
				</form>

			</div>
		</div>
	</div>
	<aside class="menu">
		<ul>
			<li class="person">
				<a href="#">个人中心</a>
			</li>
			<li class="person">
				<ul>
					<li class="active"> <a href="/user/toInformation">个人信息</a></li>
				</ul>
			</li>
			<li class="person">
				<ul>
					<li><a href="/order/toOrder">我的订单</a></li>
				</ul>
			</li>
			<li class="person">
				<ul>
					<li><a href="/study/toStudy">课程</a></li>
					<li> <a href="/like/toCollect">收藏</a></li>

				</ul>
			</li>

		</ul>

	</aside>
</div>

</body>
<script th:src="@{/static/lib/vue.min.js}"></script>
<script th:inline="javascript">

	function editMessage() {
		$.ajax({
			url: "/user/editMsg",
			dataType: "json",
			type: "post",
			data: $("#editForm").serialize(),
			success: function (data) {
				location.replace(location.href)
			}
		})
	}

	function submitPic(obj) {
		var formData = new FormData();
		var name = $(obj).val();
		var file = $(obj)[0].files[0];
		formData.append("file", file);
		formData.append("name", name);
		$.ajax({
			url: "user/editPic",
			type: "post",
			dataType: "json",
			processData: false,
			contentType: false,
			data: formData,
			success: function (data) {
				location.replace(location.href)
			}
		})
	}

</script>
</html>